<template>
    <div>
        <SuperTable ref="table" path="/market/coupon/index" :params="params" :columns="columns">
            <Button slot="header-left" type="primary" to="/market/coupon/edit">新增优惠券</Button>
            <div slot="header-right">
                <Form ref="filter" :model="filter" inline>
                    <FormItem label="关键词">
                        <Input v-model="filter.name" clearable placeholder="名称" />
                    </FormItem>
                    <FormItem label="类型" prop="type">
                        <Select v-model="filter.type" clearable style="width: 80px">
                            <Option :value="1">满减券</Option>
                            <Option :value="2">折扣券</Option>
                            <Option :value="3">代金券</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="状态" prop="state">
                        <Select v-model="filter.state" clearable style="width: 80px">
                            <Option :value="1">启用</Option>
                            <Option :value="-1">禁用</Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
        </SuperTable>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
export default {
    components: {
        SuperTable
    },
    data() {
        return {
            filter: {
                name: '',
                type: null,
                state: null,
            },
            params: {
                page: 1,
                pageSize: 10,
            },
            columns: [
                {
                    title: '名称',
                    key: 'name'
                },
                {
                    title: '类型',
                    key: 'type_text'
                },
                {
                    title: '使用范围',
                    key: 'scope_text'
                },
                {
                    title: '使用条件',
                    render: (h, params) => {
                        return h("span", params.row.amount_limit == 0 ? '无限制' : '满' + params.row.amount + '元可用');
                    }
                },
                {
                    title: '面额|折扣',
                    render: (h, params) => {
                        return h("span", params.row.type == 2 ? params.row.scale + '折' : params.row.scale + '元');
                    }
                },
                {
                    title: '有效期',
                    width: 200,
                    render: (h, params) => {
                        let attr = '';
                        if (params.row.indate_type == 1){
                            attr = [h('p',params.row.indate_stime + '至'), h('p',params.row.indate_etime)];
                        }else{
                            attr = '领取后' + params.row.indate_days + '天有效';
                        }
                        return h('div', attr);
                    }
                },
                {
                    title: '领取限制',
                    render: (h, params) => {
                        return h("span", params.row.get_limit == 0 ? '无限制' : '单用户限领' + params.row.get_number + '张');
                    }
                },
                {
                    title: '发放总量',
                    key: 'total'
                },
                {
                    title: '已领取',
                    key: 'received'
                },
                {
                    title: '已使用',
                    key: 'used'
                },
                {
                    title: '状态',
                    key: 'state_text'
                },
                {
                    title: '创建时间',
                    key: 'created_at'
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 120,
                    render: (h, params) => {
                        return h("div", [
                            h("Button", {
                                props: {
                                    type: "success",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.$router.push({name: 'market_coupon_edit', query: {id: params.row.id}});
                                    }
                                }
                            }, "编辑"),
                            h("Button", {
                                style: {
                                    marginLeft: "5px"
                                },
                                props: {
                                    type: "error",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.handleDelete(params.row);
                                    }
                                }
                            }, "删除")
                        ])
                    }
                }
            ]
        };
    },
    methods: {
        handlFilter() {
            const { filter } = this;
            this.params.name = filter.name;
            this.params.type = filter.type;
            this.params.state = filter.state;
            this.$refs.table.init();
        },
        handleDelete(row) {
            this.$Modal.confirm({
                title: "操作提示:",
                width: 320,
                content: `<p>您确定要删除‘${row.name}’吗?</p>`,
                onOk: () => {
                    const msg = this.$Message.loading({
                        content: '正在提交删除',
                        duration: 0
                    });
                    this.$ajax.delete('/market/coupon/delete', {params:{id: row.id}}).then(() => {
                        msg();
                        this.$Message.success('删除成功');
                        this.$refs.table.reload();
                    }).catch(err => {
                        msg();
                        this.$Message.error(err.message || '删除失败');
                    })
                }
            });
        }
    }
};
</script>